import React, { Component } from 'react';

export default class App extends Component {
    state={
        list:[1,2,3,4,5,6,7,8,9,10,11,12]
    }
    myref=React.createRef()
    render() {
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        list:[13,14,15,16,17,...this.state.list]
                    })
                }}>来来来</button>
                <div style={{height:'100px',overflow:'auto',background:'yellow'}} ref={this.myref}>
                    {this.state.list.map((item,i)=>
                        <li key={i} style={{height:'50px'}}>{item}</li>
                    )}
                </div>
            </div>
        );
        
    }
    getSnapshotBeforeUpdate(){
        //旧容器高度
        return this.myref.current.scrollHeight
    }
    componentDidUpdate(prevProps,prevState,value){
        this.myref.current.scrollTop+=this.myref.current.scrollHeight-value
    }
    

}
